<template>
  <div class="coupon">
    <template v-if="data.length > 0">
      <coupon-item
        v-for="item in data"
        :key="item.id"
        :data="item"
        @detail="showDetail"
        @pass="pass"
        @remove="remove"
        @refuse="refuse"
      >
      </coupon-item>
      <!--S分页-->
      <div id="pagination">
        <el-pagination
          layout="prev, pager, next"
          :page-size="page_size"
          :total="total"
          @current-change="changePage"
        />
      </div>
      <!--E分页-->
    </template>
    <template v-else>
      <h2 class="empty">暂无审核卡券</h2>
    </template>

    <!--S卡券核销规则弹窗-->
    <el-dialog
      title="核销规则"
      :visible.sync="detailDialog.show"
    >
      <div v-html="detailDialog.detail"></div>
    </el-dialog>
    <!--E卡券核销规则弹窗-->

    <!--S删除拒绝审核素材-->
    <el-dialog
      title="请输入审核失败原因"
      :visible.sync="removeDialog.show"
    >
      <el-form
        ref="form"
        :rules="removeDialog.rules"
        :model="removeDialog.form"
      >
        <el-form-item prop="remark">
          <el-input v-model="removeDialog.form.remark" type="text" placeholder="请输入审核失败原因"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitHandle">确定</el-button>
      </span>
    </el-dialog>
    <!--S删除拒绝审核素材-->
  </div>
</template>

<script>
import CouponItem from './components/item'
export default {
  name: 'Coupon',
  components: {
    CouponItem
  },
  data() {
    return {
      // 卡券总数
      total: 0,
      page_size: 30,
      page: 1,
      data: [],
      detailDialog: {
        show: false,
        detail: ''
      },
      // 删除素材弹窗
      removeDialog: {
        show: false,
        handle_id: 0, // 操作下标
        doing: 'refuse', // || remove 删除
        rules: {
          remark: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ]
        },
        form: {
          remark: '' // 备注信息
        }
      }
    }
  },
  mounted() {
    this.getTotal()
    this.getList()
  },
  methods: {
    getTotal() {
      this.$get('coupon/check/total')
        .then((res) => {
          this.total = res.data.data
        })
    },
    getList() {
      this.$get('coupon/check', {
        limit: [(this.page - 1) * this.page_size, this.page_size]
      })
        .then((res) => {
          this.data = res.data.data
        })
    },
    changePage(page) {
      this.page = page
      this.getList()
    },
    // 显示核销规则
    showDetail(data) {
      this.detailDialog.detail = data.detail
      this.detailDialog.show = true
    },
    // 审核通过
    pass(data) {
      this.$put('coupon/check/pass/' + data.id)
        .then(() => {
          this.getTotal()
          this.getList()
        })
        .catch((error) => {
          this.$handleError(error)
        })
    },
    // 拒绝审核
    refuse(data) {
      this.removeDialog.show = true
      this.removeDialog.handle_id = data.id
      this.removeDialog.doing = 'refuse'
    },
    // 删除卡券
    remove(data) {
      this.removeDialog.show = true
      this.removeDialog.handle_id = data.id
      this.removeDialog.doing = 'remove'
    },
    // 提交拒绝审核或者删除卡券操作
    submitHandle() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$post('coupon/check/' + this.removeDialog.doing + '/' + this.removeDialog.handle_id, {
            remark: this.removeDialog.form.remark
          })
            .then(() => {
              this.removeDialog.show = false
              this.removeDialog.form.remark = ''
              this.getTotal()
              this.getList()
            })
            .catch((error) => {
              this.$handleError(error)
            })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  #pagination{
    clear: both;
    width: 100%;
    text-align: center;
  }
  .empty{
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    text-align: center;
    color: #97a8be;
  }
</style>
